<template>
  <page-loading :show="showPage">
	<view class="box" v-if="showPage">
		<view class="header">
			<!-- 待审核 -->
			 
			<view class="title flex flex-jc-sb" v-if="getList.status === 1 || getList.status === 5 || getList.status === 20">
				<view>待审核</view>
				<view style="font-size: 24rpx; color: #666666; font-weight: lighter;">我们会在3个工作日内审核，请耐心等待。</view>
			</view>

			<!-- 未通过 -->
			<view class="title flex flex-jc-sb" v-if="getList.status === 10 || getList.status === 25">
				<view>未通过</view>
			</view>

			<!-- 待补充资料 -->
			<view class="title flex flex-jc-sb" v-if="getList.status === 15">
				<view>待补充资料</view>
			</view>

			<!-- 待付款 -->
			<view class="title flex flex-jc-sb" v-if="getList.status === 30">
				<view>待付款</view>
				<view style="font-size: 24rpx; color: #000000; font-weight: lighter;" class="flex flex-ai-c">
					<view>截止付款时间：</view><!-- {{getList.trade_Time}} -->
					<view style="font-size: 30rpx;">
						<u-count-down @end="endTime" :timestamp="time" bg-color="#FBD220"></u-count-down>
					</view>
				</view>
			</view>

			<!-- 待提车 -->
			<view class="title flex flex-jc-sb" v-if="getList.status === 35 || getList.status === 40">
				<view>待提车</view>
			</view>

			<!-- 已完成 -->
			<view class="title flex flex-jc-sb" v-if="getList.status === 45">
				<view>已完成</view>
			</view>

			<!-- icon -->
			<view class="service" v-if="getList.status === 45">
				<view class="service-title">感谢您对7迈车的信任，祝您用车愉快！</view>
				<view class="flex flex-jc-sa" style="text-align: center;padding-bottom: 20rpx;">
					<view v-for="(item,index) in typeMenu" :key='index' @click="goIcon(item.icon)">
						<view>
							<image :src="item.path" style="width: 70rpx;height: 70rpx;"></image>
						</view>
						<view>{{item.text}}</view>
					</view>
				</view>

			</view>

			<!-- 用户信息 -->
			<view class="flex flex-jc-sb name felx-ai-c" @click="goPage(getList)">
				<view>{{getList.account_Name}}<text>{{getList.account_Phone}}</text></view>
				<view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</view>

		<view class="main">
			<!-- card -->
			<view class="card">
				<view class="flex flex-ai-c" style="padding: 20rpx 0;" @click="onStore(getList.store_Id)">
					<view><i-icon icon="icondianpu" type="single" size="32rpx" color="rgb(255,225,60)"></i-icon></view>
					<view style="margin: 0 10rpx;">{{getList.store_Name | cutString(35)}}</view>
					<view>
						<u-icon name="arrow-right" color="#999999" size="28rpx"></u-icon>
					</view>
				</view>
				<view class="flex">
					<view class="img">
						<image style="width: 198rpx;height: 132rpx;" :src="getList.goodImg"></image>
					</view>
					<view>
						<view class="title">{{getList.car_Type_Name}} {{getList.configuration_Name}}</view>
						<view class="prcie">厂家指导家：<text>{{getList.factory_Money}}万</text></view>
					</view>
				</view>
				<view style="padding-bottom: 20rpx;" v-if="getList.colour !== ''">
					<view class="title flex flex-ai-c">
						<view style="letter-spacing: 6.5rpx;">
							外观内饰:
						</view>
						<view class="flex flex-ai-c colorList" style="margin-left: 20rpx;">
							<view class="flex flex-ai-c flex-wrap-w">
								<view class="color" :style="{background:JSON.parse(getList.colour).outerColour.colorCoding}"></view>
								<!-- <view class="color" :style="{background:JSON.parse(item.colour).outerColour[0].colorCoding}"></view> -->
								<view>外观+内饰</view>
								<view class="colorCoding flex" v-if="JSON.parse(getList.colour).inColour.neiColor.length===1">
									<view class="color" style="margin-left: 10rpx;" :style="{background:JSON.parse(getList.colour).inColour.colorCoding}"></view>
									<!-- <view class="color" :style="{background:JSON.parse(list.colour).inColour.neiColor.colorCoding}"></view> -->
								</view>
								<view v-else>
									<view class="color" style="margin-left: 10rpx;" :style="{background:JSON.parse(getList.colour).inColour.colorCoding}"></view>
								</view>

							</view>

						</view>
					</view>
					<view></view>
				</view>
				<view class="btns" style="padding-bottom: 30rpx;border-top: 2rpx solid #EEEEEE;">
					<view class="flex btns-lx flex-ai-c flex-jc-c">
						<view style="margin: 5rpx 7rpx 0 0;">
							<i-icon icon="iconxiaoxi" type="single" size="32rpx"></i-icon>
						</view>
							
						<view @click="contact">联系门店</view>
					</view>
					<view class="flex flex-ai-c flex-jc-c btns-zd" @click="phone">
						<view style="margin: 5rpx 7rpx 0 0;">
							<i-icon icon="icondianhua" type="single" size="32rpx"></i-icon>
						</view>
						<view>致电门店</view>
					</view>
				</view>
				 
				<view class="flex flex-jc-fe" style="font-size: 24rpx; color: #666666;" v-show="getList.status===5 || getList.status===6 || getList.status===7">
					<view style="margin:0 20rpx 30rpx 20rpx;" class="flex flex-ai-c">
						<view style="margin-right: 10rpx;" class="flex flex-ai-c" @click="isBond=true">
							<!-- 待付款 -->
							<i-icon icon="iconwenhao1" color="#EB5C02" v-if="getList.status === 5"></i-icon>
							<!-- 其他 -->
							<i-icon icon="iconwenhao1" color="#FBB000" v-else></i-icon>
							<text style="margin-left: 10rpx;">购车保证金：</text>
							<text style="color: #EB5C02;font-weight: bold;">￥{{getList.earnest_Money}}</text>
						</view>
						<view>合计：<text style="font-weight: bold;">￥{{getList.earnest_Money}}</text></view>
					</view>

				</view>
			</view>

			<!-- 方案 -->
			<view class="plan">
				<view class="icons flex flex-jc-sb flex-ai-c" v-show="getList.finance_Plan_Type===0">
					<view class="flex flex-ai-c">
						<!-- 勾选 -->
						<i-icon icon="icongouxuan" type="multiple" size="30rpx" color="#FBBC00"></i-icon>
						<view style="margin-left: 20rpx;">个人户方案</view>
					</view>
					<view class="flex flex-ai-c" @click="show = true">
						<view style="font-size: 22rpx;color: #999999;margin-right: 10rpx;">方案说明</view>
						<view>
							<i-icon icon="iconwenhao1" color="#B4B4B4" size="30rpx"></i-icon>
						</view>
					</view>
				</view>

				<view class="icons flex flex-jc-sb flex-ai-c" v-show="getList.finance_Plan_Type===1">
					<view class="flex flex-ai-c">
						<!-- 勾选 -->
						<i-icon icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
						<view style="margin-left: 20rpx;">公司方案</view>
					</view>
					<view class="flex flex-ai-c" @click="company = true">
						<view style="font-size: 22rpx;color: #999999;margin-right: 10rpx;">方案说明</view>
						<view>
							<i-icon icon="iconwenhao1" color="#B4B4B4" size="30rpx"></i-icon>
						</view>
					</view>
				</view>

				<view class="flex flex-jc-sa botton flex-ai-c">
					<view>
						<view class="num">{{getList.down_Payment_Money | million}}</view>
						<view class="text">首付({{getList.down_Payment_Rate}}%)</view>
					</view>
					<view>
						<view class="num">{{getList.installment_Monthly_Money | million}}</view>
						<view class="text">月供</view>
					</view>
					<view>
						<view class="num">{{getList.installment}}</view>
						<view class="text">期数</view>
					</view>
				</view>

			</view>

			<!-- 补交资料 -->
			<view class="info" v-if="getList.status === 15">

				<view class="bjzlcss">补交资料</view>
				<view v-if="isShow.residence">
					<view class="flex flex-ai-c mt-20">
						<view class="yuan"></view>
						<view class="name">户口本</view>
					</view>
					<view class="flex flex-jc-sb ml-30">
						<view class="imgboxs" @click="lastPicture(0)">
							<view class="image flex flex-ai-c flex-jc-c">
								<i-icon v-if="aHouseholder ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
								<image v-else :src="aHouseholder" mode="aspectFill"></image>
							</view>
							<view class="">
								户主页
							</view>
						</view>
						<view class="imgboxs" @click="lastPicture(1)">
							<view class="image flex flex-ai-c flex-jc-c">
								<i-icon v-if="oneself ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
								<image v-else :src="oneself" mode="aspectFill"></image>
							</view>
							<view class="">
								本人页
							</view>
						</view>
					</view>
				</view>
				<view v-if="isShow.driving_license">
					<view class="flex flex-ai-c mt-20">
						<view class="yuan"></view>
						<view class="name">驾驶证</view>
					</view>
					<view class="flex flex-jc-sb ml-30">
						<view class="imgboxs" @click="lastPicture(2)">
							<view class="image flex flex-ai-c flex-jc-c">
								<i-icon v-if="driverLicense ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
								<image v-else :src="driverLicense" mode="aspectFill"></image>
							</view>
							<view class="">
								驾驶证正页
							</view>
						</view>
						<view class="imgboxs" @click="lastPicture(3)">
							<view class="image flex flex-ai-c flex-jc-c">
								<i-icon v-if="driverLicenseCounter ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
								<image v-else :src="driverLicenseCounter" mode="aspectFill"></image>
							</view>
							<view class="">
								驾驶证副页
							</view>
						</view>
					</view>
				</view>
				<view v-if="isShow.marriage_license">
					<view class="flex flex-ai-c mt-20">
						<view class="yuan"></view>
						<view class="name">结婚证</view>
					</view>
					<view>
						<view class="flex flex-jc-sb ml-30" @click="lastPicture(4)">
							<view class="imgboxs">
								<view class="image flex flex-ai-c flex-jc-c">
									<i-icon v-if="certificateMarriage ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
									<image v-else :src="certificateMarriage" mode="aspectFill"></image>
								</view>
								<view class="">
									结婚证正页
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="isShow.wechat_alipay_record">
					<view class="flex flex-ai-c mt-20">
						<view class="yuan"></view>
						<view class="name">微信/支付宝流水</view>
					</view>
					<view class="flex flex-ai-c ml-30" @click="lastPicture(5)">
						<view class="image flex flex-ai-c flex-jc-c">
							<i-icon v-if="flowingWater ==='' " icon='iconxiangji' size="52rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="flowingWater" mode="aspectFill"></image>
						</view>
						<view class="ml-20">
							{{flowingwatername}}
						</view>
					</view>
				</view>
				<view v-if="isShow.house_purchase_contract">
					<view class="flex flex-ai-c mt-30">
						<view class="yuan"></view>
						<view class="name">购房合同</view>
					</view>
					<view class="flex flex-jc-sb flex-ai-c ml-30">
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(61)">
							<i-icon v-if="housingContract1 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="housingContract1" mode="aspectFill"></image>
						</view>
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(62)">
							<i-icon v-if="housingContract2 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="housingContract2" mode="aspectFill"></image>
						</view>
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(63)">
							<i-icon v-if="housingContract3 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="housingContract3" mode="aspectFill"></image>
						</view>
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(64)">
							<i-icon v-if="housingContract4 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="housingContract4" mode="aspectFill"></image>
						</view>
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(65)">
							<i-icon v-if="housingContract5 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="housingContract5" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view v-if="isShow.account_statement">
					<view class="flex flex-ai-c mt-30">
						<view class="yuan"></view>
						<view class="name">银行流水</view>
					</view>
					<view class="flex flex-ai-c ml-30">
						<view class="images flex flex-ai-c flex-jc-c" @click="lastPicture(7)">
							<i-icon v-if="bankFlow1 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="bankFlow1" mode="aspectFill"></image>
						</view>
						<view class="images ml-10 flex flex-ai-c flex-jc-c" @click="lastPicture(8)">
							<i-icon v-if="bankFlow2 ==='' " icon='iconxiangji' size="42rpx" color="#D1D1D1"></i-icon>
							<image v-else :src="bankFlow2" mode="aspectFill"></image>
						</view>
					</view>
				</view>

			</view>

			<!-- 上传发票 -->
			<view class="upload" v-if="getList.status === 40 || getList.status === 35">
				<view class="title">7迈车百亿补贴</view>
				<view>
					<view class="flex">
						<view>
							<view class="yuan"></view>
						</view>
						<view class="content">
							<view>在7迈车成功购车并上传发票用户将自动成为7迈车品牌大使享受百亿补贴；</view>
							<view style="color:#FBB000;">(视车价，平均每辆补贴1000元左右)</view>
						</view>
					</view>
					<view>
						<view class="flex">
							<view>
								<view class="yuan"></view>
							</view>
							<view class="content">
								<view>为保证用户权益，如末收到发票务必向门店索要，如不提供发票造假、发票少开等，一经查实必定严惩门店。</view>
							</view>
						</view>
					</view>
				</view>

				<!-- upload -->
				<view class="flex flex-jc-c">
					<view class="imgsss" @click="lastPicture(9)" v-if="getList.status === 40">
						<image :src="uploadinvoice || 'https://files.yzsheng.com/client/order/fapiao@2x.png'" mode="aspectFill"></image>
					</view>
					<view class="imgsss" v-else>
						<image :src="uploadinvoice || 'https://files.yzsheng.com/client/order/fapiao@2x.png'" mode="aspectFill"></image>
					</view>
				</view>
				<view style="text-align: center;line-height: 80rpx;">上传机动车销售统一发票、行驶证照片、保单发票</view>
			</view>
			<!-- 订单信息 -->
			<view class="order">
				<view style="margin-left: 24rpx;" v-if="getList.status !== 8">
					订单信息
				</view>
				<!-- 待审核 未通过-->
				<view class="order-card" v-if="getList.status === 1 || getList.status === 20 || getList.status === 10 || getList.status === 25">
					<view class="flex">
						<view style="color: #999999;">订单号:</view>
						<view style="margin-left: 50rpx;">
							{{getList.order_No}}
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">创建时间：</view>
						<view>
							{{ returnTime(getList.addTime) }}
						</view>
					</view>

					<!-- 未通过 -->
					<view class="flex" v-if="getList.status === 10 || getList.status === 25">
						<view style="color: #999999;">申请时间：</view>
						<view>
							{{ returnTime(getList.applicationTime) }}
						</view>
					</view>
				</view>

				<!-- 待补充 -->
				<view class="order-card" v-if="getList.status === 15 ">
					<view class="flex">
						<view style="color: #999999;">订单号:</view>
						<view style="margin-left: 50rpx;">
							{{getList.order_No}}
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">创建时间：</view>
						<view>
							{{ returnTime(getList.addTime) }}
						</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">审核时间：</view>
						<view>
							{{ returnTime(getList.approveTime) }}
						</view>
					</view>
				</view>

				<!-- 待付款 -->
				<view class="order-card" v-if="getList.status === 30">
					<view class="flex">
						<view style="color: #999999;">订单号:</view>
						<view style="margin-left: 50rpx;">
							{{getList.order_No}}
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">申请时间：</view>
						<view>
							{{ returnTime(getList.applicationTime) }}
						</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">审核时间：</view>
						<view>
							{{ returnTime(getList.approveTime) }}
						</view>
					</view>
					<view class="flex" v-if="getList.otherDataAddTime !=='0001-01-01T00:00:00'">
						<view style="color: #999999;">补资时间：</view>
						<view>
							{{ returnTime(getList.otherDataAddTime) }}
						</view>
					</view>
				</view>

				<!-- 待提车 已完成-->
				<view class="order-card" v-if="getList.status === 40 || getList.status === 45 || getList.status === 35">
					<view class="flex fc">
						<view style="color: #999999;">订单号:</view>
						<view style="margin-left: 50rpx;">
							{{getList.order_No}}
						</view>
						<view class="copy" @click="copyUrl">复制</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">申请时间：</view>
						<view>
							{{ returnTime(getList.applicationTime) }}
						</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">审核时间：</view>
						<view>
							{{ returnTime(getList.approveTime) }}
						</view>
					</view>
					<view class="flex" v-if="getList.otherDataAddTime !=='0001-01-01T00:00:00' ">
						<view style="color: #999999;">补资时间：</view>
						<view>
							{{ returnTime(getList.otherDataAddTime) }}
						</view>
					</view>
					<view class="flex">
						<view style="color: #999999;">付款时间：</view>
						<view>
							{{ returnTime(getList.trade_Time) }}
						</view>
					</view>
					<view class="flex" v-show="getList.status === 45">
						<view style="color: #999999;">交车时间：</view>
						<view>
							{{ returnTime(getList.getCarTime) }}
						</view>
					</view>
					<view class="flex" v-show=" getList.status === 40">
						<view style="color: #999999;">支付方式：</view>
						<view>在线支付</view>
					</view>
				</view>

				<view class="agreement flex" style="margin-left: 20rpx;" v-if="getList.status === 30">
					<view class="icons" @click="agree">
						<!-- 未选择 -->
						<i-icon v-if="isAgree" icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#e1e1e1"></i-icon>
						<!-- 勾选 -->
						<i-icon v-else icon="iconiconfontxuanzhong" type="single" size="30rpx" color="#FBBC00"></i-icon>
					</view>
					<text style="font-size: 22rpx; ">我已阅读并同意</text><text style="color: #EB5C02;font-size: 22rpx; font-weight: bold;"
					 @click="agreeBuy=true">《用户在线购车服务协议》</text>
				</view>

			</view>
			<!-- btn -->
			<view class="btn flex flex-ai-c flex-jc-c" v-if="getList.status === 1 || getList.status === 20 || getList.status === 10 || getList.status === 25">
				<view class="btn-content">
					<view class="btn-content-lx" @click="contact">在线联系</view>
					<view class="btn-content-phone" @click="phone">致电我们</view>
				</view>
			</view>
			<view class="btn flex flex-ai-c flex-jc-c" v-if="getList.status === 35">
				<view class="btn-content" @click="getMSg">
					<view class="tc" style="background: #EEEEEE;">确认提车</view>
				</view>
			</view>
			<view class="btn flex flex-ai-c flex-jc-c" v-if="getList.status === 40">
				<view class="btn-content" @click="confirmdelivery()">
					<view class="tc">确认提车</view>
				</view>
			</view>
			<view class="btn flex flex-ai-c flex-jc-c" v-if="getList.status === 15">
				<view class="btn-content" @click="confirmSubmission">
					<view class="tc">确认提交</view>
				</view>
			</view>
			<!-- btn -->
			<view class="btn flex-ai-c flex-jc-c" v-if="getList.status === 30">
				<view class="flex flex-jc-sa flex-ai-c" style="text-align: center;margin-top: 15rpx;">
					<view>
						<view>保证金</view>
						<view style="color: #EB5C02;font-weight: bold;">￥{{getList.earnest_Money}}</view>
					</view>
					<view>
						<view>合计</view>
						<view style="font-weight: bold;">￥{{getList.earnest_Money}}</view>
					</view>
					<view @click="goPay" style="width: 290rpx;height: 88rpx;background: linear-gradient(0deg, #FBD220, #FFE23E);border-radius: 44rpx;text-align: center;line-height: 88rpx;">
						去付款</view>
				</view>
			</view>
			<!-- 方案说明 -->
			<u-popup v-model="show" border-radius="30" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" height="490rpx">
				<view class="popup">
					<view class="title">个人方案</view>
					<view class="content">
						个人户方案，是7迈车采用常规银行及厂家金融方案模式，由具备分期购车特许资质的银行、厂家金融为客户提供的一种分期购车服务。
						客户以分期支付的方式，以较低的门槛享受到汽车使用权和所有权。
					</view>
				</view>

			</u-popup>
			<!-- 公司说明 -->
			<u-popup v-model="company" border-radius="30" mode="bottom" :safe-area-inset-bottom="true" :closeable="true" height="490rpx">
				<view class="popup">
					<view class="title">公司方案</view>
					<view class="content">
						公司户方案，是7迈车采用国际成熟的融资租赁模式，由具备融资租赁特许资质的融资租赁公司为客户提供的全新购车服务,
						享受更低的首付，更灵活的月供；客户以分期支付租金的方式，以较低的门槛先期享受到了汽车的使用权，并将在支付
						全部租金及留购价之后获得车辆所有权。
					</view>
				</view>

			</u-popup>
			<!-- 用户在线协议 -->
			<u-modal v-model="agreeBuy" confirm-color="#FBD220" title="用户在线购车服务协议" :title-style="{color: '#000000'}" @confirm="agreement" :mask-close-able="true">
				<view class="popup">
					<!-- <view class="agreeBuy-title">用户在线购车服务协议</view>		 -->

					<view class="content" style="line-height: 50rpx;color: #666666;">
						<view>重要提示：</view>
						<buyCar-agreement></buyCar-agreement>
					</view>
				</view>
			</u-modal>
			<u-modal v-model="isBond" confirm-color="#FBD220" title="用户在线购车服务协议" :title-style="{color: '#000000'}" :mask-close-able="true">
				<view class="popup">
					<!-- <view class="agreeBuy-title">用户在线购车服务协议</view>		 -->
			
					<view class="content" style="line-height: 50rpx;color: #666666;">
						<view>重要提示：</view>
						<bond></bond>
					</view>
				</view>
			</u-modal>
		</view>

	</view>
  </page-loading>
</template>

<script src='./details.js'></script>

<style lang="scss" scoped>
 @import  './details.scss';
</style>
